<template>
  <el-card shadow="never" class="aui-card--fill">
    <el-row :gutter="20">
      <el-col :span="12">
        <h1>收费表</h1>
        <div>
          <el-table :data="feeSchedule" border style="width: 90%">
            <el-table-column prop="type" label="费用类型" header-align="center" align="center"></el-table-column>
            <el-table-column prop="money" label="金额" header-align="center" align="center"></el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="12">
        <h1>订单类型分布</h1>
        <div>
          <ve-pie :data="typeTotal" :settings="pieSettings"></ve-pie>
        </div>
      </el-col>
    </el-row>
    <br>
    <div class="mod-eightapp__eicostinfo}">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList">
        <el-form-item>
          <el-input v-model="dataForm.id" placeholder="请输入费用编号查询" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" @click="getDataList"></el-button>
        </el-form-item>

        <el-form-item>
        </el-form-item>
        <el-form-item>
        </el-form-item>

        <el-form-item>
          <el-input v-model="byCostOwnerId" placeholder="请输入业主编号查询" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" @click="getCostInfoDataListByOwnerId"></el-button>
        </el-form-item>

        <el-form-item>
        </el-form-item>
        <el-form-item>
        </el-form-item>

        <el-form-item>
          <el-select v-model="byCostType" @change="getCostInfoDataListByType">
            <el-option v-for="item in allTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
        </el-form-item>
        <el-form-item>
        </el-form-item>

        <el-form-item>
          <el-button v-if="$hasPermission('eightapp:eicostinfo:save')" type="primary" icon="el-icon-plus"
                     @click="addOrUpdateHandle()"></el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('eightapp:eicostinfo:delete')" type="danger" icon="el-icon-delete"
                     @click="deleteHandle()"></el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="exportHandle()">{{ '导出数据为Excel文件' }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
                style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="id" label="费用编号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="ownerId" label="业主编号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="managerId" label="物业管理员编号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="type" label="费用类型" header-align="center" align="center"></el-table-column>
        <el-table-column prop="costTime" label="产生时间" header-align="center" align="center"></el-table-column>
        <el-table-column prop="total" label="费用总计" header-align="center" align="center"></el-table-column>
        <el-table-column prop="creator" label="建表人" header-align="center" align="center"></el-table-column>
        <el-table-column prop="createTime" label="建表时间" header-align="center" align="center"></el-table-column>
        <el-table-column prop="updator" label="更新人" header-align="center" align="center"></el-table-column>
        <el-table-column prop="updateTime" label="改表时间" header-align="center" align="center"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="200">
          <template slot-scope="scope">
            <el-button v-if="$hasPermission('eightapp:eicostinfo:update')" type="primary" icon="el-icon-edit" circle
                       @click="addOrUpdateHandle(scope.row.id)"></el-button>
            <el-button v-if="$hasPermission('eightapp:eicostinfo:delete')" type="danger" icon="el-icon-delete" circle
                       @click="deleteHandle(scope.row.id)"></el-button>
            <el-button type="success" icon="el-icon-finished" circle @click="confirmPayment(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './eicostinfo-add-or-update'

export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/eightapp/eicostinfo/page',
        getDataListIsPage: true,
        exportURL: '/eightapp/eicostinfo/export',
        deleteURL: '/eightapp/eicostinfo',
        deleteIsBatch: true
      },
      dataForm: {
        id: ''
      },
      feeSchedule: [
        {
          type: "水费",
          money: "￥100/月"
        },
        {
          type: "电费",
          money: "￥300/月"
        },
        {
          type: "停车费",
          money: "￥500/年"
        },
        {
          type: "物业费",
          money: "￥1000/年"
        },
        {
          type: "供暖费",
          money: "￥2000/年"
        }
      ],
      allDataList: [],
      typeTotal: {
        columns: ['费用类型', '总数'],
        rows: [
          {'费用类型': '物业费', '总数': 0},
          {'费用类型': '水费', '总数': 0},
          {'费用类型': '电费', '总数': 0},
          {'费用类型': '停车费', '总数': 0},
          {'费用类型': '供暖费', '总数': 0}
        ]
      },
      pieSettings: {
        label: {
          show: true
        },
        labelLine: {
          show: true
        }
      },
      byCostOwnerId: '',
      allTypes: [{
        value: '',
        label: '所有费用类型'
      }, {
        value: '水费',
        label: '水费'
      }, {
        value: '电费',
        label: '电费'
      }, {
        value: '停车费',
        label: '停车费'
      }, {
        value: '物业费',
        label: '物业费'
      }, {
        value: '供暖费',
        label: '供暖费'
      }],
      byCostType: '',
      K: 0
    }
  },
  components: {
    AddOrUpdate
  },
  created() {
    this.getCostInfoDataList();
    this.K = 1;
  },
  methods: {
    /**
     * 确认支付方法
     * @param id
     */
    confirmPayment(id) {
      this.$confirm('是否确定业主已经支付相应费用？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.get('eightapp/eicostinfo/confirmPayment/' + id)
            .then(({data: res}) => {
              this.query()
              this.getCostInfoDataList()
              this.$message({
                type: 'success',
                message: '操作成功！'
              })
            })
      })
    },
    /**
     * 获取订单表所有信息------CostInfo
     */
    getCostInfoDataList() {
      this.$http.get('eightapp/eicostinfo/getCostInfoAllDataList')
          .then(({data: res}) => {
            this.allDataList = res.data;
            this.getTypeTotal();
          }).catch(() => {
      })
    },
    /**
     * 根据业主ID获取订单------CostInfo
     */
    getCostInfoDataListByOwnerId() {
      this.initializeByCostType();
      this.dataListLoading = true;
      if (this.byCostOwnerId == '') {
        this.dataList = this.allDataList;
        this.dataListLoading = false;
      } else {
        this.$http.get('eightapp/eicostinfo/getCostInfoDataListByOwnerId/' + this.byCostOwnerId)
            .then(({data: res}) => {
              this.dataList = res.data;
              this.dataListLoading = false;
            }).catch(() => {
        })
      }
    },
    /**
     * 根据费用类型获取订单------CostInfo
     */
    getCostInfoDataListByType() {
      this.initializeByCostOwnerId();
      this.dataListLoading = true;
      if (this.byCostType == '') {
        this.dataList = this.allDataList;
        this.dataListLoading = false;
      } else {
        this.$http.get('eightapp/eicostinfo/getCostInfoDataListByType', {
          params: {type: this.byCostType}
        }).then(({data: res}) => {
          this.dataList = res.data;
          this.dataListLoading = false;
        }).catch(() => {
        })
      }
    },
    /**
     * byCostOwnerId的初始化方法
     */
    initializeByCostOwnerId() {
      this.byCostOwnerId = '';
    },
    /**
     * byCostType的初始化方法
     */
    initializeByCostType() {
      this.byCostType = '';
    },


    /**
     * 以下为饼图相关方法
     *
     * 为饼图的每个属性的'总数'赋值
     */
    getTypeTotal() {
      this.typeTotal.rows[0]['总数'] = this.getPieData('物业费', this.allDataList);
      this.typeTotal.rows[1]['总数'] = this.getPieData('水费', this.allDataList);
      this.typeTotal.rows[2]['总数'] = this.getPieData('电费', this.allDataList);
      this.typeTotal.rows[3]['总数'] = this.getPieData('停车费', this.allDataList);
      this.typeTotal.rows[4]['总数'] = this.getPieData('供暖费', this.allDataList);
    },
    /**
     * 计算饼图每个属性在数据库中的总数
     * @param type
     * @param val
     * @returns {number}
     */
    getPieData(type, val) {
      let count = 0;
      for (let item of val) {
        if (type == item.type) {
          count++;
        }
      }
      return count;
    }
  }
}
</script>
